<script setup>
import UserHeader from '@/components/UserHeader.vue'
import WebFooter from '@/components/WebFooter.vue'
import { useStyleTag } from '@vueuse/core'
import {
  ArrowRight,
  View
} from '@element-plus/icons-vue'
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router' // 导入 useRouter 钩子函数
import { getAlumniRandomDataService } from '@/api/alumniEvent'; // 引入接口函数
import { getCareerResourceListService } from '@/api/careerResources';
import { formatToDate } from '@/utils/format';
import { formatNumber } from '@/utils/format';
useStyleTag(
  `@import 
  url("//at.alicdn.com/t/c/font_4833919_h3wd3db5h9.css");`,
  { id: 'iconfont-css' })// 唯一 ID 防止重复
const router = useRouter(); // 调用 useRouter 钩子函数
// 定义一个响应式变量来跟踪当前激活的选项卡索引
const activeTab = ref(0)


const bannerBoxList = ref([])
const headerLinesList = ref([])
const getAlumniData = async () => {
  const { data: arr } = await getAlumniRandomDataService(8);
  // console.log(arr);
  arr.forEach(item => {
    item.endTime = formatToDate(item.endTime);
  })
  //过滤出前四个数组
  bannerBoxList.value = arr.slice(0, 4);
  // console.log(bannerBoxList.value);
  //获取后面4个数组
  headerLinesList.value = arr.slice(4, 8);
  // console.log(headerLinesList.value);
}
const careerResList = ref([])
const getCareerRes = async () => {
  const articleType = activeTab.value + 1;
  const params = {
    articleType,
    limit: 5
  }
  const { data: arr } = await getCareerResourceListService(params);
  // console.log(arr);
  careerResList.value = arr;
}

const changeArticleType = (index) => {
  if (index === activeTab.value) return;
  activeTab.value = index;
  getCareerRes();
}

onBeforeMount(() => {
  getAlumniData();
  getCareerRes();
});




</script>

<template>

  <UserHeader></UserHeader>


  <!-- 新增内容容器 -->
  <div class="main-container" ref="main">
    <div class="content-wrapper">
      <div class="content-main">
        <div class="alumni-event">
          <div class="home-cont-title ">
            <span>校友活动</span>
            <p>
              <!-- 跳转到/alumni-event -->
              更多资讯
              <el-icon class="right-icon">
                <ArrowRight />
              </el-icon>
            </p>
          </div>
          <div class="home-info-banner">
            <!-- 骨架屏 -->
            <div v-if="bannerBoxList.length <= 0" class="banner_skeleton_wrap">
              <el-skeleton :animated="true" :loading="true" :throttle="500">
                <template #template>
                  <div class="top_img">
                    <el-skeleton-item v-for="(i, topImgIndex) in 4" class="banner_skeleton_img" variant="image" />
                  </div>
                </template>
              </el-skeleton>
            </div>
            <!-- 正式内容 -->
            <router-link v-for="(item) in bannerBoxList" :key="item.eventId" :to="`/alumni-event/${item.eventId}`"
              target="_blank" class="banner-box">
              <img :src="item.coverImageUrl" alt="">
              <div class="banner-img" :style="{ backgroundImage: `url(${item.coverImageUrl})` }"></div>
              <p>
                <span class="word-2">{{ item.eventName }}</span>
              </p>
            </router-link>
          </div>
          <div class="home-info-headlines">

            <!-- 骨架屏 -->
            <div v-if="headerLinesList.length === 0" class="banner_skeleton_wrap">
              <el-skeleton :animated="true" :loading="true" :throttle="500">
                <template #template>
                  <div class="bottom_text">
                    <el-skeleton-item v-for="(i, headerLinesIndex) in 4" variant="text" class="skeleton-text" />
                  </div>
                </template>
              </el-skeleton>
            </div>

            <router-link v-for="(item, index) in headerLinesList" :key="item.eventId"
              :to="`/alumni-event/${item.eventId}`" target="_blank" rel="noopener noreferrer" class="headline-item">
              <div class="left">
                <i class="iconfont icon-remai"></i>
                <span class="text word-1">{{ item.eventName }}</span>
              </div>
              <div class="right">
                <span class="end_date">
                  <i class="iconfont icon-daikaishi"></i>
                  <span>结束日期:&nbsp; &nbsp;{{ item.endTime }}</span>
                </span>
              </div>
            </router-link>
          </div>


        </div>
        <div class="career-resources">
          <div class="resources-title">
            <!-- 新增标题栏 -->
            <div class="title-left">
              <h3>职业资源</h3>
            </div>
          </div>
          <!-- Tab导航 -->
          <div class="resources-tabs">
            <div class="left">
              <div v-for="(tab, tabIndex) in
                ['职业规划', '行业资讯', '招聘信息']" :class="['tab-item', { active: activeTab === tabIndex }]"
                @click="changeArticleType(tabIndex)">
                {{ tab }}
              </div>
            </div>
            <div class="more-resources">
              <span>更多资源</span>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </div>
          </div>
          <!-- 内容列表 -->
          <div class="article-list">

            <!-- 骨架屏 -->
            <div v-if="careerResList.length <= 0" class="banner_skeleton_wrap article_item ">
              <el-skeleton :animated="true" :loading="true" :throttle="500">
                <template #template>
                  <div class="skeleton_article" v-for="(i, skArticleIndex) in 4">
                    <!-- 用户信息 -->
                    <div class="user-info">
                      <el-skeleton-item class="user-avatar" variant="circle" />
                      <el-skeleton-item variant="text" style="width: 10%" />
                    </div>

                    <!-- 内容主体  -->
                    <div class="article-content">
                      <div class="content-left">
                        <el-skeleton-item variant="p" class="skeleton_p" />
                        <el-skeleton-item variant="p" class="skeleton_p" />
                        <div class="article-stats">
                          <el-skeleton-item variant="text" v-for="(i2, articleStatsIndex) in 3" style="width: 5%" />

                        </div>
                      </div>
                      <div class="content-right skeleton_right">
                        <!-- <img class="article-thumb" src="http://e.com" alt="文章封面"> -->
                        <el-skeleton-item class="right_img" variant="image" />
                      </div>
                    </div>
                  </div>

                </template>
              </el-skeleton>
            </div>
            
            <div class="article_item" v-for="(item, index) in careerResList" :key="item.resourceId">
              <!-- 用户信息 -->
              <a class="user-info" :href="`/space/${item.authorId}`" target="_blank">
                <img class="user-avatar" :src="item.authorAvatarUrl" alt="">
                <span class="user-name">{{ item.authorName }}</span>
              </a>

              <!-- 内容主体 -->
              <div class="article-content">
                <div class="content-left">

                  <router-link target="_blank" class="article-title" :to="`/career-resource/${item.resourceId}`">
                    {{ item.title }}
                  </router-link>
                  <p class="article-desc word-2">{{ item.summary }}</p>
                  <div class="article-stats">
                    <div class="stat-item">
                      <el-icon>
                        <View />
                      </el-icon>
                      阅读 {{ formatNumber(item.viewCount) }}
                    </div>
                    <div class="stat-item like_icon">
                      <i class="iconfont icon-zan"></i>
                      赞 {{ formatNumber(item.likeCount) }}
                    </div>
                    <!-- <div class="stat-item">
                      <i class="iconfont icon-shoucang"></i>
                      收藏 891
                    </div> -->
                  </div>
                </div>
                <div class="content-right">
                  <img class="article-thumb" :src="item.coverImageUrl" alt="文章封面">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <WebFooter></WebFooter>

</template>

<style lang="scss" scoped>
/*@keyframes jump {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    top: -64px;
  }

  100% {
    top: 0;
  }

}

@media (max-width: 1279.9px) {
  .right-entry__outside .right-entry-text {
    display: none;
  }
}


.bili_header {
  background-color: #fff;
  min-height: 64px;
  position: relative;
  margin: 0 auto;
  max-width: 2560px;
  width: 100%;



  .header__bar {
    position: absolute;
    top: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    max-width: 2560px;
    width: 100%;
    height: 64px;
    box-shadow: inset 0 -1px 0 #e3e5e7 !important;

    .left_entry {
      display: flex;
      align-items: center;

      .homepage {
        display: flex;
        align-items: center;
        margin-right: 10px;

        .icon-shouye {
          margin-right: 6px;
          font-weight: bold;
        }
      }

      .logo {
        width: 100px;

        a {
          height: 64px;
          display: block;
          font-size: 0;
          margin-right: 10px;
          background-image: url(../assets/new11.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }

      .employ_analysis {
        margin-right: 10px;
        color: #18191c;

        a {
          display: inline-block;

          &:hover {
            animation: jump .4s;
          }


        }
      }
    }

    .center_search_container {
      margin: 0 10px;
      height: 38px;

      .center-search__bar {
        position: relative;
        margin: 0 auto;
        margin-left: 100px;
        min-width: 181px;
        max-width: 500px;

        form {
          border-radius: 8px;
          background-color: #f1f2f3;
          display: flex;
          align-items: center;
          padding: 0 48px 0 4px;
          position: relative;
          z-index: 1;
          overflow: hidden;
          line-height: 38px;
          border: 1px solid #e3e5e7;
          height: 40px;
          opacity: .9;
          transition: background-color .3s;

          &:hover {
            border: 1px solid #e3e5e7;
            background: #fff;
          }

          &:focus-within {
            border: 1px solid #e3e5e7;
            border-bottom: none;
            background: #fff;
          }

          .nav-search-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 0 8px;
            width: 100%;
            height: 32px;
            border: 2px solid transparent;
            border-radius: 6px;

            &:focus {
              background-color: #e3e5e7;
            }

            &:focus-within {
              background-color: #e3e5e7;
            }

            .nav-search-input {
              flex: 1;
              overflow: hidden;
              padding-right: 8px;
              border: none;
              background-color: transparent;
              box-shadow: none;
              color: #61666d;
              font-size: 14px;
              line-height: 20px;

              &:active {
                outline: none;
                background-color: #e3e5e7;
                color: #18191c;
              }
            }

            .nav-search-clean {
              width: 16px;
              height: 16px;
              right: 10px;
              cursor: pointer;
              visibility: hidden;

              svg {
                position: absolute;
                color: #c9ccd0;
              }
            }
          }

          .nav-search-btn {
            position: absolute;
            top: 3px;
            right: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            color: #18191c;
            line-height: 32px;
            cursor: pointer;
            transition: background-color .3s
          }
        }
      }
    }

    .right_entry {
      margin-left: 10px;
      display: flex;
      align-items: center;

      .right-entry__outside {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-shrink: 0;
        margin-right: 0;
        min-width: 50px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        .right-entry-icon:hover {
          animation: jump .3s;
        }

        .right-entry-text {
          color: #61666d;
        }
      }

      .v-popover {
        position: absolute;

        transform: translate3d(-50%, 0, 0);
        top: 100%;
        left: 50%;
        transition: .3s;
        z-index: 1;

        .v-popover-content {
          position: relative;
          background-color: #fff;
          box-shadow: 0 0 30px rgba(0, 0, 0, .1);
          border-radius: 8px;
          border: 1px solid #e3e5e7;
          color: #18191c;


        }
      }

      .avatar-popover-is-bottom {
        padding-top: 12px;
        margin-left: -12px;
      }

      .message-popover-is-bottom {
        padding-top: 15px;
        margin-left: 0px;
      }

      .moment-popover-is-bottom {
        padding-top: 15px;
        margin-left: 0px;
      }


      .header-avatar-wrap {
        position: relative;
        box-sizing: content-box;
        padding-right: 10px;
        width: 50px;
        height: 50px;
        cursor: pointer;

        .header-avatar-wrap--container {
          position: relative;
          z-index: 2;

          .header-entry-mini {
            position: absolute;
            top: 5px;
            left: 10px;
            z-index: 2;
            display: block;
            width: 38px;
            height: 38px;
            border-radius: 50%; // 圆形
            animation: fadeIn .6s both;

            img {
              border: 2px solid #fff;
              border-radius: 50%;
              object-fit: inherit;
            }
          }

          @keyframes fadeIn {
            0% {
              opacity: 0;
            }

            100% {
              opacity: 1;
            }
          }
        }

        .avatar-panel-popover {
          padding: 0 24px 18px;
          width: 300px;
          border-radius: 8px;
          background-color: #fff;

          .avatar-top-space {
            height: 25px; // 留出顶部空间
            margin-bottom: 10px;
          }

          .user-nickname {
            text-align: center;
            font-size: 18px;
            font-weight: 550;
            margin-bottom: 10px;
            color: #18191c;
          }

          .links-item {
            list-style: none;
            padding: 0;
            margin: 0;

            .single-link-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 2px;
              padding: 0 14px;
              height: 38px;
              border-radius: 8px;
              color: #61666d;
              font-size: 14px;
              cursor: pointer;
              transition: background-color .3s;
              white-space: nowrap;

              .link-title {
                display: flex;
                align-items: center;


                .link-icon {
                  margin-right: 16px;
                }

                .icon-huodong_huodongguanli {
                  margin-right: 16px;
                  font-size: 19px;
                }

                .icon-wodebaoming1 {
                  color: #61666d;
                  margin-right: 5px;
                  font-size: 29px;
                  transform: translateX(-3px);
                }
              }

              .link-icon--right {
                transform: rotate(-90deg);
              }

            }

            .split-line {
              margin: 10px 0;
              width: 100%;
              height: 1px;
              background: #e3e5e7;
            }

            .logout-item {
              display: flex;
              align-items: center;
              padding: 10px 14px;
              border-radius: 8px;
              color: #61666d;
              font-size: 14px;
              cursor: pointer;
              transition: background-color .3s;

              .link-icon {
                margin-right: 16px;
              }
            }

          }

          // margin-bottom: 10px;

          // a,
          // router-link {
          //   text-align: center;
          //   display: block;
          //   padding: 0 10px;
          //   border-radius: 4px;
          //   color: #61666d;
          //   font-size: 14px;
          //   text-decoration: none;
          //   transition: background-color 0.3s;

          //   &:hover {
          //     background-color: #f1f2f3;
          //   }
          // }
        }
      }

      .v-popover-wrap {
        position: relative;

        .red-num--message {
          position: absolute;
          top: -6px;
          left: 25px;
          z-index: 1;
          padding: 0 3px;
          min-width: 15px;
          border-radius: 10px;
          background-color: #fa5a57;
          color: #fff;
          font-size: 12px;
          line-height: 15px;
        }
      }

      .right-entry--message {
        position: relative;

        .red-num--message {
          position: absolute;
          top: -6px;
          left: 25px;
          z-index: 1;
          padding: 0 3px;
          min-width: 15px;
          border-radius: 10px;
          background-color: #fa5a57;
          color: #fff;
          font-size: 12px;
          line-height: 15px;
        }

        .message-entry-popover {
          overflow: hidden;
          width: 142px;
          border-radius: 8px;

          .message-inner-list {
            display: flex;
            flex-direction: column;
            padding: 12px 0;

            .message-inner-list__item {
              position: relative;
              display: flex;
              align-items: center;
              padding: 10px 0 10px 27px;
              color: #61666d;
              text-align: left;
              font-size: 14px;
              transition: background-color .3s;

              .message-inner-list__item--num {
                position: absolute;
                right: 17px;
                padding: 0 5px;
                border-radius: 8px;
                background: #fa5a57;
                color: #fff;
                font-size: 12px;
                line-height: 16px;
              }
            }
          }
        }

        .dynamic-panel-popover {
          width: 370px;
        }


      }

      .right-entry-item {
        display: block;
        flex-shrink: 0;
        margin-right: 4px;
        min-width: 50px;
        text-align: center;
        // background-color: pink;

        .right-entry-icon {
          color: #18191c;
        }

        .icon-fabuzhongxin_gongzuotai {
          display: inline-block;
          vertical-align: top;
          margin-bottom: -7px;
          margin-top: -6px;
          font-size: 23px;
        }

        // .publish-text {
        //   color: #61666d;
        // }    


      }

      .right-entry-item--upload {
        margin: 0;
        min-width: 0;

      }

      .header-upload-entry {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16px;
        width: 90px;
        height: 34px;
        border-radius: 8px;
        background-color: rgba(0, 174, 236);
        color: #fff;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        cursor: pointer;
        transition: background-color .3s;

        &:hover {
          background-color: rgba(0, 199, 254);
        }

        .header-upload-entry__icon {
          margin-right: 5px;
          color: #fff;
        }

      }
    }

  }

  .slide_down {
    position: fixed;
    top: 0;
    background-color: #fff;
    box-shadow: inset 0 -1px 0 #e3e5e7 !important;
    transition: transform 0.3s ease; // 使用transform实现更流畅的动画
    animation: slideDown 0.3s forwards; // 添加下滑动画
  }
}

*/


.main-container {
  background-color: #f7f8fa;
  // padding: 70px 0 24px;
  padding: 24px 0;
  min-height: calc(100vh - 64px); // 减去头部高度
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}


.content-main {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.alumni-event {


  .home-cont-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    span {
      color: #000;
      font-size: 18px;
      font-weight: 600;
    }

    p {
      color: #999;
      cursor: pointer;

      .right-icon {
        padding-top: 7px;
        vertical-align: top;
      }
    }
  }

  .home-info-banner {
    display: flex;
    justify-content: space-between;

    .banner-box {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-radius: 8px;
      margin: 0 16px;
      overflow: hidden;
      position: relative;
      cursor: pointer;

      img {
        opacity: 0;
        height: 142px;
        // width: 184px;
      }

      .banner-img {
        position: absolute;
        -webkit-transition: all .5s;
        transition: all .5s;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../assets/realBg.jpeg);
      }

      &:hover {
        .banner-img {
          -webkit-transform: scale(1.5);
          transform: scale(1.5);
        }
      }

      p {
        position: absolute;
        height: 64px;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#10151a));
        background: linear-gradient(180deg, transparent, #10151a);
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        bottom: 0;
        padding: 0 12px 8px;

        span {
          color: #fff;
          font-weight: 600;
        }
      }


    }
  }


  .home-info-headlines {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: 16px;

    a {
      width: calc(100% - 10px);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 40px;
      color: #000;
      justify-content: space-between;
      border-bottom: 1px solid #f2f2f2;
      position: relative;
      padding-left: 16px;

      .left {
        max-width: 60%;

        .icon-remai {
          position: absolute;
          left: 0;
          top: 10px;
          font-size: 8px;
          color: #ec4c39;
        }

        .text {
          margin-left: 3px;
        }
      }

      .right {
        display: flex;

        .end_date {
          margin-right: 10px;

          .icon-daikaishi {
            margin-right: 5px;
            color: #eb7778;
          }
        }
      }
    }
  }
}

.resources-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 30px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
  }

  .title-right {
    display: flex;
    align-items: center;
    color: #9499a0;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #00aeec;
    }

    .right-arrow {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}

.resources-tabs {
  position: relative;
  display: flex;
  margin-bottom: 5px;
  border-bottom: 1px solid #f0f0f0;
  justify-content: space-between; // 改为两端对齐
  align-items: center;
  position: relative;

  .left {
    display: flex;

    .tab-item {
      padding: 12px 24px;
      font-size: 16px;
      color: #666666;
      cursor: pointer;
      transition: color 0.3s;

      &.active {
        color: #000;
        font-weight: 600;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 100%;
          height: 2px;
          background: #000;
        }
      }

      // 修改此处，仅当 tab-item 没有 active 类时，鼠标悬停才改变颜色
      &:not(.active):hover {
        color: #0088ff;
        animation: jump 0.3s;
      }
    }
  }

  .more-resources {
    display: flex;
    align-items: center;
    color: #9499a0;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #00aeec;
    }

    .el-icon {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}

.article_item {
  padding: 16px 16px;
  border-bottom: 1px solid #f5f5f5;
  border-radius: 10px;

  &:hover {

    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .15);
    background: #fff;
  }

  .user-info {

    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .user-name {
      color: #666;
      font-size: 14px;

      &:hover {
        color: #006fff;
      }
    }
  }

  .article-content {
    display: flex;
    justify-content: space-between;

    .content-left {
      width: 84%;
      padding-right: 24px;
    }

    .content-right {
      width: 16%;
      flex-shrink: 0;

      display: flex;
      justify-content: center;

      .article-thumb {
        width: 100%;
        // height: 80px;
        max-height: 108px;
        border-radius: 4px;
        object-fit: cover;
      }
    }
  }

  .article-title {
    font-size: 18px;
    color: #18191c;
    margin-bottom: 8px;
    display: block;
    cursor: pointer;

    &:hover {
      color: #00aeec;
    }
  }

  .article-desc {
    color: #9499a0;
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;
  }

  .article-stats {
    display: flex;
    gap: 24px;
    color: #9499a0;
    font-size: 13px;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;



      .icon-zan {
        vertical-align: bottom;
        margin-bottom: -5px;
        font-size: 16px;
      }

      .icon-shoucang {
        font-size: 13px;
      }
    }

    .like_icon:hover {
      color: #000;
    }
  }


}



/*/~ 添加固定样式 ~/
.fixed_header {
  // display: none;
  background-color: #fff;
  min-height: 64px;
  margin: 0 auto;
  max-width: 2560px;
  width: 100%;
  // 添加硬件加速
  // transform: translateZ(0);
  // backface-visibility: hidden;
  position: fixed;
  top: -64px;
  z-index: 1000;
  /~ 确保 header 在其他元素之上 ~/
  transition: transform 0.3s ease; // 使用transform实现更流畅的动画
  animation: slideDown 0.3s forwards; // 添加下滑动画
}*/



.banner_skeleton_wrap {
  width: 100%;


  .top_img {
    display: flex;
    justify-content: space-between;
    min-height: 142px;

    /* 骨架屏样式 */
    .banner_skeleton_img {
      flex: 1;
      height: inherit;
      margin: 0 16px;
      border-radius: 8px;
    }
  }

  .bottom_text {
    margin-top: 16px;

    .skeleton-text {
      width: 100%;
      height: 24px;
      margin: 8px 0;
    }
  }

  .skeleton_article {
    margin: 5px 0;

    .skeleton_p {
      margin: 6px 0;
      max-width: 90%;
    }

    .skeleton_right {
      margin-right: 3%;

      .right_img {
        border-radius: 8px;
        min-width: 140px;
        min-height: 100px;
      }
    }

  }


}
</style>